<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>女装</li>
      <li>童装</li>
      <li>家电</li>
      <li>狗粮</li>
    </ul>
    <div class="content">欢迎进入女装专区</div>

    <div style="margin-top: 50px">
      <span>英雄联盟</span>
      <span>王者荣耀</span>
      <span>和平精英</span>
      <span>穿越火线</span>
    </div>
    <div class="content1">欢迎进入英雄联盟专区</div>
  </body>
</html>
<script src="./index.js"></script>
<script>
  // 创建对象的方法有哪些？
  // 1.字面量创建对象
  // let obj = {}
  // 2.构造函数来创建
  // function Start(val) {
  //   // 构造函数我们习惯上首字母大写
  //   this.name = val;
  // }
  // let obj = new Start("德华");
  // console.log(obj);
  // 3.工厂函数来创建
  // function fn(val) {
  //   let obj = new Object();
  //   obj.name = val;
  //   return obj;
  // }

  // let obj1 = fn("学友");
  // console.log(obj1);
  // 4.class 类来创建一个对象

  // class Start {
  //   constructor(val, age) {
  //     // 当使用new关键字 实例化 类的时候，会自动触发该函数 我们一般在这个函数里面，写属性
  //     this.name = val;
  //     this.age = age;
  //     // this.sing = function () {};
  //   }
  //   sing() {
  //     // constructor 同级写的方法都会挂在到原型上
  //     console.log(this.name + "唱的是爱你，挺好听");
  //   }
  // }
  // let obj = new Start("王心凌", "45");
  // // obj.sing();
  // console.log(obj);

  // let dom = document.querySelectorAll("li");
  // // console.log(dom);
  // let content = document.querySelector(".content");
  // for (let i = 0, item; (item = dom[i++]); ) {
  //   item.onclick = function () {
  //     dom.forEach((n) => {
  //       n.style.color = "#000";
  //     }); // 把所有的 都变成黑色
  //     item.style.color = "red";
  //     content.innerHTML = `欢迎进入${item.innerHTML}专区`;
  //   };
  // }

  // for (let index = 0; index <script dom.length; index++) {
  //   console.log(dom[index]);
  // }

  // new Tab("li", ".content");
  // new Tab("span", ".content1");

  // // 类的继承
  // class Start {
  //   constructor(name) {
  //     this.name = name;
  //   }
  // }

  // 完全继承
  // class Child extends Start {}

  // 扩展自己的属性
  // class Child extends Start {
  //   constructor(val, dic) {
  //     super(val); // 继承父元素的属性以及方法
  //     this.dic = dic;
  //   }
  // }
  // let obj = new Child("天天", "学会了早恋");
  // console.log(obj);

  class Child extends Tab {
    constructor(tabDom, contDom) {
      super(tabDom, contDom);
      this.back();
    }
    back() {
      this.content.style.background = "green";
    }
  }

  new Child("li", ".content");
  new Child("span", ".content1");
</script>
